<template>
  <div>
    <el-form :model="component1">
    </el-form>
    <el-table :data="component2.rows">
    </el-table>
    <el-table :data="component2.rows">
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox } from 'element-ui';

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElForm,
    ElFormItem,
    ElInput,
    ElRadioGroup,
    ElRadio,
    ElCheckboxGroup,
    ElCheckbox,
  },
  data() {
    return {
      component4: {
        "id": 4,
        "type": "Checkbox",
        "label": "复选框",
        "checked": false,
        "width": 200,
        "height": 200,
        "top": 0,
        "left": 0
      },
      component5: {
        "id": 5,
        "type": "Radio",
        "label": "单选框",
        "options": [
          "选项1",
          "选项2"
        ],
        "selected": ""
      },
      componentundefined: {
        "width": 200,
        "height": 200,
        "top": 5,
        "left": 205
      },
      component1: {
        "id": 1,
        "type": "Form",
        "inputs": []
      },
      component2: {
        "id": 2,
        "type": "Table",
        "columns": [],
        "rows": [],
        "width": 200,
        "height": 200,
        "top": 0,
        "left": 0
      },
      component3: {
        "id": 3,
        "type": "Input",
        "label": "输入框",
        "value": "",
        "width": 200,
        "height": 200,
        "top": 0,
        "left": 0
      },
    }
  }
}
</script>

<style scoped>
/* Add your styles here */
</style>